<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="4" :offset="8">
                <el-input v-model.trim="keyword.name" prefix-icon="fa fa-search" placeholder="字体图标查询"
                          v-permission="'plugin:icon:list'"
                          @keyup.enter.native="refreshIcon"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-search" @click="refreshIcon"
                           v-permission="'plugin:icon:list'"> 搜 索
                </el-button>
            </el-col>
        </el-row>
        <!--        <h2>图标管理</h2>-->
        <!--        <h3>搜索 使用 filter</h3>-->
        <!--        <h3>排序 sort </h3>-->
        <div class="icon-list">
            <el-row>
                <el-col :xs="8" :sm="8" :md="4" :lg="3" :xl="3" class="icon-item" v-for="(item,index) in showIcon"
                        :key="index">
                    <el-tooltip effect="dark" :content='"<i class=\"".concat(item.class).concat("\"></i>")'
                                placement="top" style="text-align:center;">
                        <div @click='copyIcon("<i class=\"".concat(item.class).concat("\"></i>"))'>
                            <i :class="item.class" style="font-size:24px;"></i>
                            <div style="font-size: 1px;margin-top: 10px;">{{item.class}}</div>
                        </div>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import elementIcon from "../../../utils/icon-js/element-ui";
    import fontAwesome from "../../../utils/icon-js/font-awesome";
    import copyElementUtil from "../../../utils/copyElementUtil";
    import {NO_MESSAGE, TOO_MUCH_DATA_STUCK} from "../../../config/constant/message-Info";

    export default {
        name: 'SystemIcon',

        data() {
            return {
                // 两个图片都使用, DOM元素加值过多，很卡
                icon: [...elementIcon, ...fontAwesome],
                showIcon: [],
                keyword: {
                    name: ""
                },
            }

        },

        methods: {
            refreshIcon() {
                // 过滤字符
                if (this.keyword.name !== "") {
                    this.showIcon = this.icon.filter(item => item.class.indexOf(this.keyword.name.toLowerCase()) !== -1);
                    this.$notify.warning({
                        message: TOO_MUCH_DATA_STUCK,
                        title: "提示",
                        duration: 2500
                    });
                } else {
                    this.$notify.warning({
                        message: NO_MESSAGE,
                        title: "提示",
                        duration: 1500
                    });
                    this.showIcon = [];
                }
            },
            copyIcon(value) {
                // 复制元素
                copyElementUtil(value);
            }
        },

        mounted() {
        },

        computed: {},

        watch: {}
    }
</script>

<style lang="scss" scoped>
    .icon-list {
        box-shadow: 1px 1px 6px rgba(0, 0, 0, .3);
        margin-top: 8px;

        .icon-item {
            padding: 20px;
            height: 100px;

            &:hover {
                cursor: pointer;
                color: #4284f3;
            }
        }
    }
</style>